<template>
  <div class="authing-header">
    <h3 class="header-title">Future</h3>
    <div class="switch-img">
      <el-tooltip effect="dark" :content="loginTypeTitle" placement="left-start">
        <svg-icon @click="changeLoginHandle" class="switch-icon" :icon-class="iconClass"/>
      </el-tooltip>
    </div>
  </div>
</template>

<script>


export default {
  name: 'SwitchImg',
  data() {
    return {
      iconClass: 'password',
      loginTypeTitle: '密码登录'
    }
  },


  mounted(){

  },
  methods:{
    changeLoginHandle(){
      this.iconClass = this.iconClass === 'qq' ? 'password' : 'qq'
      if(this.iconClass === 'qq'){
        this.loginTypeTitle = '扫码登录'
        let showStatus =  [false, true]
        this.$emit('changeLogin',showStatus)
      }else{
        this.loginTypeTitle = '密码登录'
        let showStatus = [true, false]
        this.$emit('changeLogin', showStatus)
      }
    }
  }

}
</script>

<style lang="scss" scoped>
  @import "~@/assets/styles/variables.scss";
  .authing-header{
    height: 80px;
    padding: 5px;
  }
  .header-title{
    margin: 60px auto 30px 40px;
    font-size: 30px;
    text-align: center;
    color: #141313;
    position: absolute;
  }
  .switch-img{
    // 上右下左
    margin: 10px 0 0 380px;
    .switch-icon{
      font-size: 50px;
      color: #396aff;
      cursor: pointer;
    }
  }
</style>
